<template>
    <!-- 第2屏的背景-黑色 -->
    <div class="product-bg">
        <!-- 4个产品 外面的大盒子 -->
        <div class="product-box">
            <!-- 分别是4个产品 -->
            <div class="product-box1">
                <img class="main-image product1" style="object-fit: cover;" src="../../assets/img/product1.jpg" alt="" ref="imgRef">
                <video class="video" ref="videoRef" src="../../assets/img/videos-lens_1312.mp4" preload="auto" muted></video>
                <div class="content">
                    <p class="first_p">
                        双潜望四主摄
                        <br>
                        洞悉色彩 解构光影
                    </p>
                    <img class="arrow" src="../../assets/img/arrow.svg" alt="">
                </div>
            </div>
            <div class="product-box2">
                <img class="main-image" src="../../assets/img/product2.jpg" style="object-fit: cover;" alt="">
                <div class="content">
                    <p>
                        哈苏大师影像
                        <br>
                        大师视角 格调入镜
                    </p>
                    <img class="arrow" src="../../assets/img/arrow.svg"  alt="">
                </div>
            </div>
            <div class="product-box3">
                <img class="main-image" src="../../assets/img/product3.jpg" style="object-fit: cover;" alt="">
                <div class="content">
                    <p>
                        2K 超通透钻石屏
                        <br>
                        出众亮度 醒目护眼
                    </p>
                    <img class="arrow" src="../../assets/img/arrow.svg" alt="">
                </div>

            </div>
            <div class="product-box4">
                <img class="main-image" src="../../assets/img/product4.jpg" style="object-fit: cover;" alt="">
                <div class="content">
                    <p>
                        卫星通信
                        <sup style="font-size: 12px;">1</sup>
                        <br>
                        畅游天际 通达寰宇
                    </p>
                    <img class="arrow" src="../../assets/img/arrow.svg" alt="">
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const imgRef = ref()
const videoRef = ref()

onMounted(() => {
    mouseEvent()
})

const mouseEvent = () => {
    imgRef.value.addEventListener('mouseover', () => {
        videoRef.value.play()
    })
    videoRef.value.addEventListener('mouseleave', () => {

    })
}
</script>

<style lang="scss" scoped>
.product-bg {
    background-color: #000;
    padding: 88px 60px;
    background-attachment: fixed;


    position: relative;
    overflow: auto;

    .product-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .product-box1{
            transition: all 0.5s linear;
            width: 25%;
            overflow: hidden;
        }

        .product-box2,
        .product-box3,
        .product-box4 {
            transition: all 0.2s linear;
            width: 25%;
            overflow: hidden;
        }

        .product-box1:hover,
        .product-box2:hover,
        .product-box3:hover,
        .product-box4:hover {
            width: 32%;
        }

        .product-box1 {
            height: 480px;

            .video {
                opacity: 0;
            }
        }

        .product-box1:hover {
            .video {
                position: absolute;
                opacity: 1;
                left: -440px;
            }

            .product1 {
                opacity: 0;
            }
        }

        .main-image:hover {
            transform: scale(1.1, 1.1);
        }
    }

    .product-box > * {
        position: relative;
    }
}

// 4个产品图片的样式
.main-image {
    width: 100%;
    height: 476px;
    transition: 0.2s all linear;
    transition-delay: 0.2s;
}

.first_p {
    position: relative;
    z-index: 999;
}

.content {
    // display: flex;
    // justify-content: space-between;
    position: absolute;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    left: 22px;
    bottom: 28px;
}

.main-image,
.content {
    cursor: pointer;
}

.product-box p {
    color: #fff;
    font-size: 22px;
    white-space: nowrap;
    display: inline-block;
}

.arrow {
    width: 24px;
    float: right;
    height: 24px;
    margin-top: 40px;
    margin-right: 30px;
}
</style>